<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局组件</title>
</head>
<script src="vue.js"></script>
<body>
    <div id="app">
        <com :com-msg="msg"></com>
    </div>
    <script>
        // 根组件，父组件
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'这是父组件的值',
            },
            //①子组件不能直接访问父组件的值，需要父组件vm传递过来
            // ②vm通过props传递过来，props传递的是一个数组
            // ③强行修改父组件通过props传递过来的值，能成功，但是会报错，
            components:{
                com:{
                    props:['comMsg'],
                    template:'<div @click="changeEvent"><h1>这里存放————{{this.comMsg}}</h1></div>',
                    data:function(){
                        return{
                            // commsg:'这是子组件的值',
                        }
                    },
                    methods:{
                        changeEvent:function(){
                            this.comMsg = '修改props传递过来comMsg的值';
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>